<template>
  <div class="follow">
    <!-- 左侧动态部分 -->
    <div class="event"></div>

    <!-- 右侧个人信息部分 -->
    <div class="userInfo">
      <div class="userInfo_part1">
        <!-- 头像 -->
        <div class="avatarImage">
          <el-image
            style="width: 60px; height: 60px"
            :src="avatarUrl"
            fit="fill"
          ></el-image>
        </div>

        <!--昵称 性别 个性签名 -->
        <div>
          <div class="nickname_tag">
            <div class="nickname">{{ nickname }}</div>
            <div class="tag">
              <i class="el-icon-male" v-if="gender == 1"></i>
              <i class="el-icon-female" v-if="gender == 2"></i>
            </div>
          </div>
          <div class="signature">{{ signature }}</div>
        </div>
      </div>

      <!-- 个人信息详情 -->
      <div class="userInfo_part2">
        <div>
          <div class="eventCount">
            <div class="count">{{ eventCount }}</div>
            <div class="text">动态</div>
          </div>

          <div class="follows" @click="toFollowsPage">
            <div class="count">{{ follows }}</div>
            <div class="text">关注</div>
          </div>

          <div class="followeds" @click="toFollowedsPage">
            <div class="count">{{ followeds }}</div>
            <div class="text">粉丝</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  name: 'userDetail',

  data() {
    return {
      // 用户等级
      level: '',
      // 用户性别
      gender: '',
      // 用户关注
      follows: '',
      // 用户昵称
      nickname: '',
      // 用户粉丝
      followeds: '',
      // 个人介绍
      signature: '',
      // 用户头像
      avatarUrl: '',
      // 用户动态数量
      eventCount: '',
    }
  },
  computed: {
    ...mapState(['userId']),
  },
  created() {},
  mounted() {
    this.getUserDetailInfo()
    this.routerIsActiveInfo()
  },
  methods: {
    ...mapMutations([
      'changePath',
      'changeIsActive',
      'changeTheFollowsUserId',
      'changeTheFollowedsUserId',
    ]),

    // 子传父函数，接收传递过来的 侧边栏信息
    routerIsActiveInfo() {
      const isActive = 'follow'
      this.changeIsActive(isActive)
    },
    // 获取用户详情
    async getUserDetailInfo() {
      const { data: res } = await this.$http({
        url: `/user/detail?uid=${this.userId}`,
        withCredentials: true, //关键
      })
      // console.log(res)
      this.getUserDetailAboutInfo(res)
    },
    // 提取关注页面相关信息
    getUserDetailAboutInfo(obj) {
      /**
       * 用户等级 level
       * 用户性别 gender  1为男生 2为女生 0为私密
       * 用户关注 follows
       * 用户昵称 nickname
       * 用户粉丝 followeds
       * 个人介绍 signature
       * 用户头像 avatarUrl
       * 用户动态数量 eventCount
       */
      this.level = obj.level
      this.gender = obj.profile.gender
      this.follows = obj.profile.follows
      this.nickname = obj.profile.nickname
      this.followeds = obj.profile.followeds
      this.signature = obj.profile.signature
      this.avatarUrl = obj.profile.avatarUrl
      this.eventCount = obj.profile.eventCount
    },

    // 传递用户数据，并跳转到关注页面
    toFollowsPage() {
      const info = {
        path: '/view/follows',
        isActive: '',
        theFollowsUserId: this.userId,
      }

      this.changePath(info.path)
      this.changeIsActive(info.isActive)
      this.changeTheFollowsUserId(info.theFollowsUserId)

      this.$emit('getFollowsPageInfo')
    },
    // 传递用户数据，并跳转到粉丝页面
    toFollowedsPage() {
      const info = {
        path: '/view/followeds',
        theFollowedsUserId: this.userId,
      }

      this.changePath(info.path)
      this.changeTheFollowedsUserId(info.theFollowedsUserId)

      this.$emit('getFollowedsPageInfo')
    },
  },
}
</script>

<style lang="less" scoped>
.follow {
  display: flex;
  > .event {
    width: 760px;
  }
  > .userInfo {
    width: 372px;
    border-left: 1px solid #e0e0e0;
    min-height: 540px;
  }
}

.userInfo_part1 {
  display: flex;
  padding: 16px 12px 2px 12px;
  background-color: #f5f5f7;

  > .avatarImage {
    padding: 16px;
    > .el-image {
      border-radius: 50%;
    }
  }
  .nickname_tag {
    padding-top: 18px;
    padding-bottom: 4px;
    display: flex;
    > .nickname {
      font-size: 14px;
    }
    > .tag {
      width: 40px;
      padding-left: 4px;
      .el-icon-male {
        background-color: #c0f3ff;
        border-radius: 50%;
        padding: 2px;
        color: #3da1d1;
      }
      .el-icon-female {
        background-color: #ffcde8;
        border-radius: 50%;
        padding: 2px;
        color: #ed6da3;
      }
    }
  }
  .signature {
    width: 160px;
    font-size: 14px;
    color: #99999a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.userInfo_part2 {
  background-color: #f5f5f7;
  padding-left: 52px;
  padding-bottom: 22px;

  > div {
    display: flex;
    > div {
      .count {
        font-size: 18px;
      }
      .text {
        margin-top: 4px;
        color: #353536;
        font-size: 14px;
      }
    }
    > .eventCount {
      padding-right: 36px;
      > .count {
        position: relative;
        left: 7px;
      }
    }
    > .follows {
      width: 82px;
      text-align: center;
      border-right: 1px solid #e6e6e6;
      border-left: 1px solid #e6e6e6;
    }
    .followeds {
      padding-left: 36px;
      > .count {
        position: relative;
        left: 7px;
      }
    }
  }
}
</style>